<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <p>
            <label>请输入</label><input type="text" v-model="msg">
        </p>
        <p>
            文本:<span>{{msg}}</span>
        </p>
        <p>
            逆文本:<span>{{msg.split("").reverse().join("")}}</span>
        </p>
        <hr>
        <p>
            <!-- 将父组件中的数据(变量),动态的绑定到text属性上,作为属性值 -->
            逆文本: <text-reverse :text="msg"></text-reverse>
        </p>
    </div>
</body>
<template id="textReverse">
    <span>{{msg.split("").reverse().join("")}}</span>
</template>
<script>

    // 组件传参 
    // 1. 传入静态属性 count="10", 一般会作为组件中的初始值 => (由于不能直接修改传入的数据) =>  根据传入的值得到一个新值 => 绑定到data上
    // 2. 传入动态属性 :count="count", 如果父组件中的数据发送改变,子组件接收的数据也会改变  => (由于不能直接修改传入的数据)  => 根据传入的值的到一个新值(计算属性)

    // 注意: 
    // 父组件向子组件传递动态属性时, 如果父组件中的数据(传入的数据)发生改变,子组件接收的数据也会改变 => 引发子组件视图更新 (子组件 会响应父组件 的数据更新)

    Vue.component("text-reverse", {
        props: ["text"],
        data() { // 组件初始化时执行 => 更新数据,不会触发组件初始化,只会触发组件更新
            return {
                // 把组件接收的text数据放到data中,作为msg的初始值  => text发生改变不会修改初始值   
                msg: this.text,
            }
        },
        computed: {
            // 把组件接收的text数据放到计算属性中得到一个新属性 => text发生改变,msg也会收到影响
            // msg: function () {
            //     console.log("msg根据text改变");
            //     return this.text;
            // }
        },
        template: "#textReverse",
        watch: {
            text(newVal) {
                console.log("text发生改变", newVal);
                this.msg = newVal;
            }
        },
        mounted() {
            console.log("组件加载完毕", this.text);
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
        }
    })







</script>

</html>